<template>
    <div class="conversations">
        <div v-if="this.$route.query.h5==1">
            <div class="conversations-title">会话({{$parent.$data.unreadTotal}})</div>
        </div>
        <div class="conversations-box">
            <div v-if="$parent.$data.conversations.length !==0">
                <div class="scroll-item" v-for="(conversation, key) in $parent.$data.conversations" :key="key">
                    <div class="item-head">
                        <img :src="conversation.data && conversation.data.avatar"  class="head-icon"/>
                        <div class="item-head_unread" v-if="conversation.unread">{{conversation.unread}}</div>
                    </div>
                    <div class="scroll-item_info">
                        <div class="item-info-top">
                            <span class="item-info-top_name">{{conversation.data && conversation.data.name}}</span>
                            <div class="item-info-top_time">{{formatDate(conversation.lastMessage.timestamp)}}</div>
                        </div>
                        <div class="item-info-bottom">
                            <div class="item-info-bottom-item" @click="navigateToChat(conversation)">
                                <div class="item-info-top_content">
                                    <span>
                                        {{conversation.lastMessage.senderData.name}}:
                                    </span>
                                    <span v-if="conversation.lastMessage.type == 'text'" class="text-conversation">
                                        {{conversation.lastMessage.payload.text}}
                                    </span>
                                    <span v-else-if="conversation.lastMessage.type == 'video'">
                                        [视频消息]
                                    </span>
                                    <span v-else-if="conversation.lastMessage.type == 'audio'">
                                        [语音消息]
                                    </span>
                                    <span v-else-if="conversation.lastMessage.type == 'image'">
                                        [图片消息]
                                    </span>
                                    <span v-else-if="conversation.lastMessage.type == 'file'">
                                        [文件消息]
                                    </span>
                                    <span v-else-if="conversation.lastMessage.type == 'order'">
                                        [订单消息]
                                    </span>
                                    <span v-else>
                                        [未识别内容]
                                    </span>
                                </div>
                                <div class="item-info-bottom_action" @click.stop="showAction(conversation)"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="no-conversation" v-else>
                当前没有会话为空
            </div>
            <div class="action-container" v-if="action.show">
                <div class="layer" @click="action.show = false"></div>
                <div class="action-box">
                    <div class="action-item" @click="topConversation">{{action.conversation.top ? '取消置顶' : '置顶聊天'}}</div>
                    <div class="action-item" @click="removeConversation">删除聊天</div>
                </div>
            </div>
            <div class="action-toast" v-if="action.showToast">
                {{action.toastMessage}}
            </div>
        </div>
        <div class="mask" v-show="showLoading">
            <img src="/images/pending.gif"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "conversation",
        data() {
            return {
                showLoading : false,
                action : {
                    conversation : null,
                    show : false,
                    toastMessage : '',
                    showToast : false
                }
            }
        },
        beforeMount() {
            //加载loading
            this.showLoading = true;
            

            if (!this.currentUser || !this.currentUser.uuid) 
            {
                let uuid = this.$route.query.uuid;
                let name = this.$route.query.name;
                let password = this.$route.query.password;
                let avatar = this.$route.query.avatar;


                this.imService.initData();

                let loginResult = this.imService.login(uuid,name,password,avatar);
                this.imService.connectIM();

                //this.subscribeGroupMessage();
            }else{
                this.imService.initData();
                let loginResult = this.imService.login(this.currentUser.uuid,this.currentUser.name,this.currentUser.password,this.currentUser.avatar);
                this.imService.connectIM();
            }
            
            //加载会话列表
            this.im.latestConversations()
                .then(res => {
                    console.log('获取会话成功', res.content);
                    let content = res.content;
                    this.$parent.$data.conversations = content.conversations;
                    this.$parent.$data.unreadTotal =content.unreadTotal;
                    this.showLoading = false;

                    document.title = "会话("+content.unreadTotal+")";
                })
                .catch(e => {
                    console.log(e);
                    this.showLoading = false;
                });
        },
        methods: {
            navigateToChat(conversation) {                
                let id = conversation.userId || conversation.groupId;
                let name = conversation.data.name;
                let avatar = conversation.data.avatar;
                this.$router.push({
                    name: conversation.type,
                    query: {
                        id : id,
                        name : name,
                        avatar : avatar,
                        h5 : this.$route.query.h5,
                        ios : this.$route.query.ios
                    }
                });
            },
            showAction (conversation) {
                this.action.conversation = conversation;
                this.action.show = true
            },
            topConversation() {
                this.showLoading = true;
                let conversation = this.action.conversation;
                let title = conversation.top ? '取消置顶失败' : '置顶失败';
                let promise;
                if(conversation.type === this.GoEasyIM.SCENE.PRIVATE){
                    promise = this.im.topPrivateConversation(conversation.userId, !conversation.top)
                }else{
                    promise = this.im.topGroupConversation(conversation.groupId, !conversation.top)
                }
                this.afterDoAction(promise, title)
            },
            removeConversation() {
                this.showLoading = true;
                let promise,conversation = this.action.conversation;
                if(conversation.type === this.GoEasyIM.SCENE.PRIVATE){
                    promise = this.im.removePrivateConversation(conversation.userId)

                }else{
                    promise = this.im.removeGroupConversation(conversation.groupId)
                }
                this.afterDoAction(promise, '删除中')
            },
            afterDoAction (promise, title) {
                promise.then(() => {
                    console.log('操作成功')
                    this.showLoading = false
                }).catch(() => {
                    this.showLoading = false;
                    this.action.toastMessage = title;
                    this.action.showToast = true;
                    setTimeout(() => {
                        this.action.showToast = false
                    },2000)
                });
                this.action.show = false
            }
        }
    }
</script>

<style scoped>
    @import "./conversations.css";
</style>

